<template>
	<view class="container">
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item, index) in list" :key="index">
				<view class="swiper-item">
					<image :src="item.icon" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>
		<uni-section title="功能列表" sub-title="" type="square">
		</uni-section>
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="com">
			<swiper-item>
				<view class="comment">
					<uni-list>
						<uni-list-item v-for="(item, index) in comments" :key="index"
							:title="item.title"></uni-list-item>
					</uni-list>
				</view>
			</swiper-item>
			<swiper-item>
				<uni-grid :column="5">
					<uni-grid-item class="grid" v-for="item,index in typelist">
						<view>
							<image :src="item.icon" mode="aspectFill" class="img"></image>
						</view>
						<text>{{item.name}}</text>
					</uni-grid-item>
				</uni-grid>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				"list": [{
						"icon": "/static/images/school1.jpg",
					},
					{
						"icon": "/static/images/school2.jpg",
					},
					{
						"icon": "/static/images/school3.jpg",
					},
					{
						"icon": "/static/images/school4.jpg",
					}
				],
				"comments": [{
						"title": "食堂1",
					},
					{
						"title": "食堂2",
					},
					{
						"title": "食堂3",
					}
				],
				"typelist": [{
						"icon": "/static/images/news.png",
						"name": "新闻"
					},
					{
						"icon": "/static/images/announcement.png",
						"name": "公告"
					},
					{
						"icon": "/static/classmate.png",
						"name": "同学"
					},
					{
						"icon": "/static/images/telephone.png",
						"name": "电话"
					},
					{
						"icon": "/static/images/leaveword.png",
						"name": "留言"
					}
				]
			}
		},
		methods: {}
	}
</script>

<style>
	.container {
		font-size: 14px;
		line-height: 24px;
	}

	.swiper-item {
		width: 100%;
		height: 240px;
	}

	.swiper-item image {
		width: 100%;
		height: 100%;
	}

	.comment-a {
		width: 100%;
		height: 100px;
	}


	.grid {
		text-align: center;
	}

	.grid text {
		font-size: 14px;
		color: #666;
		margin-top: -10px;
	}

	.img {
		width: 45px;
		height: 45px;
	}
</style>